<template>
  <div class="add-assets-wrap">
    <div class="btn-add-inner"
    @click="handleClick"
    :style="{ width: `${size.width}px`, height: `${size.height}px` }">
      <i class="iconfont icon-add"></i>
    </div>
  </div>
</template>

<script>
import { camelCase } from 'lodash';
import { mapMutations,mapActions,mapGetters } from 'vuex'
import { registerComponents } from '@/plugins/index';
export default {
  name: 'AddAssets',
  props: {
    pannelName: {
      type: String,
      default: ''
    },
    size: {
      type: Object,
      default () {
        return {
          width: 250,
          height: 250
        }
      }
    }
  },
  computed:{
    ...mapGetters('programs', ['currScene']),
  },
  methods: {
    ...mapActions('programs', ['addElement', 'setCurrentElement']),
    ...mapMutations('programs', ['setShowMaterial']),
    handleClick() {
      if(this.pannelName==='audio'){
        let hasElementUUID = false;
        let currElement = {
          elName: "sxc-audio",
          icon: "iconfont icon-audio",
          title: "背景音乐",
          valueType: ""
        }
        this.currScene.elements.forEach(res => {
          if (res.elName === 'sxc-audio') {
            hasElementUUID = res.uuid;
          }
        });
        if (hasElementUUID !== false) {
          this.setCurrentElement();
          this.getComponentProps(currElement.elName);
        } else {
          let needProps = this.getComponentProps(currElement.elName);
          this.addElement({
            ...currElement,
            needProps
          });
        }
      }
      if(this.pannelName==='video'){
        let hasVideoElementUUID = false;
        let currElement = {
          elName: "sxc-video",
          icon: "iconfont icon-video",
          title: "视频",
          valueType: ""
        }
        this.currScene.elements.forEach(res => {
          if (res.elName === 'sxc-video') {
            hasVideoElementUUID = res.uuid;
          }
        });
        if (hasVideoElementUUID !== false) {
          this.setVideoCurrentElement();
          this.getComponentProps(currElement.elName);
        } else {
          let needProps = this.getComponentProps(currElement.elName);
          this.addElement({
            ...currElement,
            needProps
          });
        }
      }
      this.$emit('before-open')
    },
    getComponentProps(elName) {
      let elComponentData;
      for (let key in registerComponents) {
        if (key.toLowerCase() === elName.toLowerCase() || key.toLowerCase() === camelCase(elName).toLowerCase()) {
          elComponentData = registerComponents[key];
          break;
        }
      }
      if (!elComponentData) return {};
      let props = {};
      for (let name in elComponentData.props) {
        props[name] = [Object, Array].includes(elComponentData.props[name].type) ? elComponentData.props[name].default() : elComponentData.props[name].default;
      }
      return props;
    }
  }
}
</script>

<style lang="scss" scoped>

</style>>
